extends layout/layout.pug

block head
  - var title = ""
  include layout/head.pug

block content
  include layout/script.pug
  main(class="home")
    div(style="position: absolute;overflow: hidden;height: 100%;width: 100%;")
      img(class="home__bg" src="https://b3log.org/siyuan/static/home.svg")
    - var headerClass = "header"
    include layout/header.pug
    div(class="home__panel wrapper")
      div(class="home__side")
        h2(class="home__slogan") 重构你的思维
        h2(class="home__keywords") 所见所得&emsp;
          span(class="feature__title--nowrap") 双链块引
          br
          | 加密同步&emsp;
          span(class="feature__title--nowrap") 隐私优先
        div(class="feature__hr")
        p(class="home__desc") 思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
          br
          br
          | 融合块、大纲和双向链接，重构你的思维。
      div(class="home__img")
        img(src="https://b3log.org/siyuan/static/feature0.png")
        div(class="feature__hr")
        div(class="feature__hr")
        a(style="padding: 16px 64px;width:auto;white-space:nowrap" href="download.html" class="home__download") 免费下载使用
    svg(xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none" viewBox="0 0 1680 40" style="z-index:1;bottom: 0;position: absolute;")
        path(d="M0 40h1680V30S1340 0 840 0 0 30 0 30z" fill="#fff")
  div(class="wrapper")
    div(id="slogan" class="second__type")
    div(class="feature__hr")
    div(class="feature__imgs animate animate__scale")
      img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:10%;width: 90%; top: 50%; transform: translateY(-50%);")
      img(style="position: relative" src="https://b3log.org/siyuan/static/home-img.png")
  div(class="feature__hr")
  div(class="feature__hr")
  div(class="navigation")
    div(class="navigation__warp wrapper")
      div(class="item" data-id="feature1")
        span 块式编辑
      div(class="item" data-id="feature2")
        span 闪卡、数据库和 AI
      div(class="item" data-id="feature3")
        span 双链块引
      div(class="item" data-id="feature4")
        span 列表大纲
      div(class="item" data-id="feature5")
        span 隐私和同步
      a(style="width: auto;padding: 8px 48px;margin-bottom: 0;align-self: center;" href="download.html" class="home__download") 下载
  div(class="feature wrapper" id="feature1")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title feature__title--1") Block 编辑模式
        div(class="feature__hr")
        h3(class="feature__desc") 在思源中，唯一重要的核心概念是内容块。
          span(class="feature__primary") 通过排版格式即可形成内容块，这样我们就能在块级粒度上对思绪和知识进行整理，同时也能方便长文阅读和输出。
    div(class="feature__hr")
    div(class="feature__imgs animate animate__scale")
      img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:0;width: 117.31%; margin: 0 -8.65%; top: 50%; transform: translateY(-50%);")
      img(style="position: relative" src="https://b3log.org/siyuan/static/feature1-1.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two")
      div(class="feature__info animate animate__left")
        h2(class="feature__title feature__primary") 元素
        div(class="feature__hr")
        h3(class="feature__desc") 内置 20+ 种类型的块元素和 10+ 种行级元素。
          span(class="feature__primary") 丰富的元素满足常用排版需要，更多特性化的需求可通过挂件块进行扩展。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1 animate__scale animate")
        img(src="https://b3log.org/siyuan/static/img-bg2.svg" style="position:absolute;left:0;width: 150%; margin: 0 -25%; top: 50%; transform: translateY(-50%);")
        img(class="feature__img" src="https://b3log.org/siyuan/static/feature1-2.png")
      div(class="feature__space")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title feature__title--1") 聚焦
        div(class="feature__hr")
        h3(class="feature__desc") 进入到块中聚焦，让我们更专注于当前块的内容。
          span(class="feature__primary") 所有块都支持聚焦，通过面包屑导航在上下文中轻松切换。
    div(class="feature__hr")
    div(class="feature__imgs animate animate__scale")
      img(src="https://b3log.org/siyuan/static/img-bg.svg" style="position:absolute;left:0;width: 117.31%; margin: 0 -8.65%; top: 50%; transform: translateY(-50%);")
      img(style="position: relative;max-width: 100%" class="feature__img" src="https://b3log.org/siyuan/static/feature1-3.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two")
      div(class="feature__info animate animate__left")
        h2(class="feature__title feature__primary") 百万字
        div(class="feature__hr")
        h3(class="feature__desc")
          span(class="feature__primary") 超大文档编辑亦可行云流水。
          | 通过动态加载技术，在配置普通的电脑上也能流畅编辑百万字级别的大文档。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1 animate__scale animate")
        img(src="https://b3log.org/siyuan/static/img-bg2.svg" style="position:absolute;left:0;width: 150%; margin: 0 -25%; top: 50%; transform: translateY(-50%);")
        img(class="feature__img" src="https://b3log.org/siyuan/static/feature1-4.png")
      div(class="feature__space")

  div(class="feature feature--2 wrapper" id="feature2")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title")
          div(class="feature__title--2") 间隔重复
          | 使用&nbsp;
          a(target="_blank" href="https://github.com/open-spaced-repetition/free-spaced-repetition-scheduler") FSRS
          | &nbsp;算法
    div(class="feature__hr")
    div(class="feature__two feature__two--row")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info animate__left animate")
        h3(class="feature__desc")
          span(class="feature__black") 提高记忆效率，调节学习效果，优化时间分配，增加学习动力。
          | 通过有效的回顾所学内容，发现自己的进步和成就，进而增强
          em 自信和自我认同。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-4.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title")
          div(class="feature__title--2") 数据库
          | 支持关联、汇总及模版
    div(class="feature__hr")
    div(class="feature__two feature__two--row")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info animate__left animate")
        h3(class="feature__desc")
          span(class="feature__black") 两个数据库之间可以通过“关联”建立联系，从而进行联动管理。
          | 汇总知识，
          em 掌控动态。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-5.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title")
          div(class="feature__title--2") 人工智能
          | 接入&nbsp;
          a(href="https://openai.com/" target="_blank") OpenAI
    div(class="feature__hr")
    div(class="feature__two feature__two--row")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__space")
      div(class="feature__info animate__left animate")
        h3(class="feature__desc")
          span(class="feature__black") 可以帮助我们续写，翻译，摘取提要，进行头脑风暴，修正语法、拼写和错别字。
          | 回答任何有趣的问题，
          em 高效助力。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--white animate__right animate" src="https://b3log.org/siyuan/static/feature2-3.png")

  div(class="feature wrapper" id="feature3" style="overflow: initial;position: relative;")
    div(class="feature__hr")
    div(style="text-align: center")
      h2(class="feature__title")
        span(class="feature__primary") 双链块引
        span(class="feature__title--3 feature__title--nowrap") 块级双向链接
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info feature__info--small" id="block1")
        h3(class="feature__desc") 文档页面也是块，降低心智负担。
          span(class="feature__primary") 所有内容都以块为基础存在，文档页面也不例外。块之间可以相互转换，拆分、重组和移动都不影响已有链接。
    div(class="feature__height")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info feature__info--small" id="block2")
        h3(class="feature__desc") 反向链接体现双链价值。
          span(class="feature__primary") 通过反向链接的提及发现潜在的知识关联，将提及转换为链接来固化关联结构。反链面板支持过滤搜索，让知识的连接更简单和高效。
    div(class="feature__height")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info feature__info--small" id="block3")
        h3(class="feature__desc") 探索链接关系图。
          span(class="feature__primary") 通过全局关系图鸟瞰知识结构分布，通过块级聚焦关系图专注知识链接路径。可视化知识的增长，闲暇之余观赏减压，赏心悦目。
    div(class="feature__height2")
    div(class="feature__img1")
      div(class="feature__img2")
        img(class="feature__img" id="blockImg" style="width: 100%;max-width: none;height: 86vh;border-radius: 8px 0 0 8px;object-fit: none;object-position: left top;" src="https://b3log.org/siyuan/static/feature3-1.png")
        img(src="https://b3log.org/siyuan/static/img-bg3.svg" style="top: -34%;left: -100%;width: 200%;position: absolute;max-width: none;height: 120vh;")

  div(class="feature feature--2 wrapper" id="feature4")
    div(style="text-align: center")
      h2(class="feature__title") 列表大纲
        div(class="feature__title--4") 梳理要点，逻辑分层
    div(class="feature__hr")
    div(class="feature__two")
      div(class="feature__info animate__left animate feature__info--smaller")
        h3(class="feature__desc")
          span(class="feature__black") 此大纲非彼大纲。
          | 列表大纲多用于快速组织具有逻辑层次的知识，简单、高效且直观。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1 animate__scale animate")
        img(class="feature__img feature__img--white" style="max-width: 100%"
          src="https://b3log.org/siyuan/static/feature4-1.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row")
      div(class="feature__info animate__left animate feature__info--smaller")
        h2(class="feature__title feature__title--4") 折叠
        br
        h3(class="feature__desc") 折叠是列表大纲最核心的操作之一，通过折叠隐藏细节、提纲挈领。在思源里，标题块也有着同样强大的折叠，文档大纲和列表大纲优势互补。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1 animate__scale animate")
        img(class="feature__img feature__img--white" style="max-width: 100%" src="https://b3log.org/siyuan/static/feature4-2.png")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two")
      div(class="feature__info animate__left animate feature__info--smaller")
        h3(class="feature__desc")
          span(class="feature__black") 列表大纲下也可以拥有丰富的排版。
          | 每条大纲条目下都能进行文档式记录，让文档与大纲充分融合，将知识的结构化进行到底。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1 animate__scale animate")
        img(class="feature__img feature__img--white" style="max-width: 100%" src="https://b3log.org/siyuan/static/feature4-3.png")

  div(id="feature5" class="feature wrapper")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      div(class="feature__info")
        h2(class="feature__title feature__primary")
          div(class="feature__title--5") 隐私安全
          | 加密上云，隐私无忧
        div
          a(href="privacy.html" class="feature__a feature__a--white")
            span 隐私政策
            svg(class="octicon" height="16" viewBox="0 0 16 16" width="16" fill="#fff")
              path(clip-rule="evenodd" d="m8.21967 2.96967c.29289-.29289.76777-.29289 1.06066 0l4.24997 4.25c.2929.29289.2929.76777 0 1.06066l-4.24997 4.24997c-.29289.2929-.76777.2929-1.06066 0s-.29289-.7677 0-1.0606l2.96963-2.9697h-7.4393c-.41421 0-.75-.33579-.75-.75s.33579-.75.75-.75h7.4393l-2.96963-2.96967c-.29289-.29289-.29289-.76777 0-1.06066z" fill-rule="evenodd")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row wrapper")
      div(class="feature__space")
      div(class="feature__info")
        h3(class="feature__desc animate__left animate")
          span(class="feature__primary") 数据完全存储在用户自己掌控的设备上。
          | 即使没有网络、即使云端服务宕机，依然可以在本地不受限制使用。
          em 无离线，不笔记。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature2-1.svg")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row wrapper")
      div(class="feature__space")
      div(class="feature__info")
        h3(class="feature__desc animate__left animate")
          span(class="feature__primary") 隐私安全靠的不是承诺。
          | 多设备数据同步基于端到端加密技术实现，云端数据即使泄漏也几乎不可能被他人知晓内容。
          em 个人隐私、知识财富不容他人觊觎。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--red animate__scale animate"
          src="https://b3log.org/siyuan/static/feature2-2.png")

    div(class="feature__hr")
    div(class="feature__hr")
    div(class="fn__flex")
      div(class="feature__space")
      h2(class="feature__title feature__primary") 多设备数据同步
        div(class="feature__title--5") 保持数据的完整和一致
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row wrapper")
      div(class="feature__space")
      div(class="feature__info")
        h3(class="feature__desc animate__left animate")
          span(class="feature__primary") 端到端加密同步&nbsp;
          | 通过端到端加密技术确保隐私安全，通过增量同步技术节省流量，提升数据同步效率。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-1.svg")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row wrapper")
      div(class="feature__space")
      div(class="feature__info")
        h3(class="feature__desc animate__left animate")
          span(class="feature__primary") 移动端伺服&nbsp;
          | 不仅仅是一个 App，它还能作为移动服务器端使用，只要电脑和手机在一个局域网里就能通过电脑浏览器直接使用手机上的思源。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-2.svg")
    div(class="feature__hr")
    div(class="feature__hr")
    div(class="feature__two feature__two--row wrapper")
      div(class="feature__space")
      div(class="feature__info")
        h3(class="feature__desc animate__left animate")
          span(class="feature__primary") Docker 部署&nbsp;
          | 通过 Docker 镜像将思源部署在服务器上来搭建自己的云端笔记，通过授权码控制访问权限，方便多人协作。
      div(class="feature__space")
      div(class="feature__imgs fn__flex-1")
        img(class="feature__img feature__img--red animate__scale animate" src="https://b3log.org/siyuan/static/feature5-3.svg")
  include layout/footer.pug
